<template>
    <h3>这里是首页,请填写一下你的授权码</h3>
    <el-divider />

    <el-form :inline="true" :model="formData" ref="authorizationCodeForm">
        <el-form-item label="授权码" >
            <el-input v-model="formData.authorizationCode" placeholder="授权码" type="password"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="saveAuthorizationCode">save</el-button>
            <el-button type="danger" @click="removeAuthorizationCode">remove</el-button>
        </el-form-item>
    </el-form>
</template>


<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useAuthorizationCodeStore } from '../store/UseAuthorizationCodeStore';
import { FormInstance } from 'element-plus';
const authorizationCodeForm =  ref<FormInstance>();
const authorizationCodeManager = useAuthorizationCodeStore();
const formData = reactive({
  authorizationCode: authorizationCodeManager.getAuthorizationCode(),
})

const saveAuthorizationCode = () => {
  console.log('submit!')
  console.log(formData);
  authorizationCodeManager.setAuthorizationCode(formData.authorizationCode)
  console.log(formData.authorizationCode)
}

const removeAuthorizationCode = () => {
  console.log('remove!')
  authorizationCodeManager.removeAuthorizationCode();
  formData.authorizationCode = '';
  console.log(formData.authorizationCode)

}
</script>
